<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>requestAnimationFrame</title>

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    div#box,
    div#request-animation-box {
      width: 100px;
      height: 40px;
      background-color: salmon;
    }
  </style>

</head>

<body>
  <div id="box"></div>
  <div id="request-animation-box"></div>
</body>

</html>

<script>
  // 使用定时器的方式,由于存在eventLoop导致代码优先级的问题.会出现定时并不准确的情况.
  let box = document.querySelector('#box'), rbox = document.querySelector('#request-animation-box')
  // normalWay()
  function normalWay() {
    let id = setInterval(() => {
      box.style.width = `${++box.clientWidth}px`
      if (box.clientWidth > 300) clearInterval(id)
      console.log(box.style.width)
    }, 17); // 1000ms / 17 = 每分钟 60 fps
  }

  // rWay
  // rWay()
  function rWay() {
    rbox.style.width = `${++rbox.clientWidth}px` // 场景内,有物体的变化,必须刷新浏览器
    if (rbox.clientWidth <= 300)
      requestAnimationFrame(rWay) // 因为必须要刷新浏览器,所以会调用 requestAnimationFrame . 
    // requestAimationFrame 的参数是一个函数.
    // 但是只调用一次,它只会在下一帧渲染之前调用.后续帧刷新时,就不会调用.
    // 所以需要不停的调用这个函数才可以.
  }

  // 那没有场景变化呢? 仅仅只是程序内部数值的变化,requestAnimationFrame会执行么? 也就是说,浏览器会刷新吗?

  // 理解错误了,requeseAnimationFrame 仅仅只是一个会在浏览器刷新下一帧前执行的方法.
  // 浏览器一直在刷新这个事情是客观存在.
  // 你可以在这个时机里选择或者不选择使用 requestAnimationFrame ,仅此而已.

  let counter = 1
  // function nothingInScreenChanged() {
  //   ++counter
  //   console.log(counter)
  //   if (counter < 1000) { // 仅仅是1000个数字的循环,基本一瞬间就可以完成
  //     nothingInScreenChanged()
  //   }
  // }

  // nothingInScreenChanged()

  function nothingInScreenChanged() {
    ++counter
    console.log(counter)
    if (counter < 1000) { // 受制于屏幕刷新率最大 60fps , 数据自增的速度会明显变慢
      requestAnimationFrame(nothingInScreenChanged)
    }
  }

  nothingInScreenChanged()


</script>